<template>
	<view style="width: 100%;">
		<view class="new_msg">
			<view class="msg_left">
				<view class="iconfont iconxx" style="margin-left: 30rpx;">

				</view>
				<view class="iconfont iconfg">

				</view>
				<view class="title">
					{{msg}}
				</view>
			</view>
			<view class="msg_right">
				<view :style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}" ref='animationEle' class="iconfont iconcuowu" style="margin-right: 30rpx; color:  #CF1D00;">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
			const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
			return {
				interval: null,
				msg: '茶城通官方给你发来一警告信息!!!!!!!茶城通官方给你发来一警告信息茶城通官方给你发来一警告信息',
				textWidth: 0,
				boxWidth: 0,
				wrapWidth: '',
				webviewHide: false,
				// #ifdef APP-NVUE
				stopAnimation: false,
				// #endif
				elId: elId,
				elIdBox: elIdBox,
				show: true,
				animationDuration: 'none',
				animationPlayState: 'paused',
				animationDelay: '0s'
			};
		},
		created() {
			this.lang()
		},
		beforeDestroy() {
			this.stopAnimation = true
		},
		methods: {
			lang: function() {
				if (this.scrollable) {
					// #ifndef APP-NVUE
					let query = [],
						boxWidth = 0,
						textWidth = 0;
					let textQuery = new Promise((resolve, reject) => {
						uni.createSelectorQuery()
							// #ifndef MP-ALIPAY
							.in(this)
							// #endif
							.select(`#${this.elId}`)
							.boundingClientRect()
							.exec(ret => {
								this.textWidth = ret[0].width
								resolve()
							})
					})
					let boxQuery = new Promise((resolve, reject) => {
						uni.createSelectorQuery()
							// #ifndef MP-ALIPAY
							.in(this)
							// #endif
							.select(`#${this.elIdBox}`)
							.boundingClientRect()
							.exec(ret => {
								this.boxWidth = ret[0].width
								resolve()
							})
					})
					query.push(textQuery)
					query.push(boxQuery)
					Promise.all(query).then(() => {
						this.animationDuration = `${this.textWidth / this.speed}s`
						this.animationDelay = `-${this.boxWidth / this.speed}s`
						setTimeout(() => {
							this.animationPlayState = 'running'
						}, 1000)
					})
					// #endif
					// #ifdef APP-NVUE
					dom.getComponentRect(this.$refs['animationEle'], (res) => {
						let winWidth = uni.getSystemInfoSync().windowWidth
						this.textWidth = res.size.width
						animation.transition(this.$refs['animationEle'], {
							styles: {
								transform: `translateX(-${winWidth}px)`
							},
							duration: 0,
							timingFunction: 'linear',
							delay: 0
						}, () => {
							if (!this.stopAnimation) {
								animation.transition(this.$refs['animationEle'], {
									styles: {
										transform: `translateX(-${this.textWidth}px)`
									},
									timingFunction: 'linear',
									duration: (this.textWidth - winWidth) / this.speed * 1000,
									delay: 1000
								}, () => {
									if (!this.stopAnimation) {
										this.loopAnimation()
									}
								});
							}
						});
					})
					// #endif
				}
			},
			stop: function() {
				//停止定时器
				clearInterval(this.interval);
			}
		}
	}
</script>

<style lang="scss">
	.new_msg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 78rpx;
		background: rgba(249, 226, 189, 1);

		.msg_left {
			display: flex;
			color: #CF1D00;
			align-items: center;
		}

		.title {
			width: 500rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 26rpx;
			height: 36rpx;
		}
	}
</style>
